<template>
  <div class="app-container">
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" :title="title" @closed="operateClose"
      :visible.sync="open" size="65%" append-to-body>
      <el-form v-loading="loading" ref="form" :model="form" :rules="rules" label-width="120px" class="form">

        <el-form-item label="店铺名称" prop="shortName">
          <name-input v-model="form.shortName" disabled :maxlength="20" placeholder="请输入店铺名称" />
        </el-form-item>
        <el-form-item label="店铺类型" prop="channelType">
          <el-select v-model="form.channelType" disabled placeholder="请选择店铺类型" clearable style="width: 100%">
            <el-option label="抖音" value="DOUYIN" />
          </el-select>
        </el-form-item>

        <el-form-item label="业务类型" prop="businessId">
          <el-select v-model="form.businessId" placeholder="请选择业务类型" clearable style="width: 100%">
            <el-option label="到店餐饮" value="1" />
            <el-option label="到综行业" value="4" />
          </el-select>
        </el-form-item>

        <el-form-item label="数据处理确认书" prop="merQual">
          <YeePayFileUpload :fileType="['zip']" @input="handUploadImg" type="file" keys="merQualUrl" :file-size="4"
            :path="form.merQualUrl" :limit="1" v-model="form.merQual"></YeePayFileUpload>
        </el-form-item>
      </el-form>
      <div class="footer-operation">
        <el-button @click="open = false">返回</el-button>
        <el-button :loading="loading" type="primary" @click="submit" v-hasPermi="['ecs:yeePayWithholding:edit']"
          v-clickOnce>提交</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import YeePayFileUpload from '@/components/yeePayFileUpload/index.vue'
import {
  incoming,
  getYeePayWithholding, yopMerchantShopBind
} from '@/api/ecs/yeePayWithholding'
import { listYeePayCity } from '@/api/ecs/yeePayCity'

export default {
  name: "yeePayWithholdingOperate",
  components: { YeePayFileUpload },
  props: {
    opens: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "店铺信息"
    },
    type: {
      type: Number,
      default: 2
    },
    id: {
      type: Number,
    },
  },
  data() {
    return {
      form: {
        id: null,
        businessId: null,
        platformId: null,
        agentId: null,
        childAgentId: null,
        agencyOperationsId: null,
        shopId: null,
        type: null,
        requestId: null,
        merQual: null,
        merQualUrl: null,
      },
      open: false,
      loading: false,
      isRefresh: false,
      agentLoading: false,
      bankNameLoading: false,
      rules: {
        merQual: [
          { required: true, message: "请上传数据处理确认书", trigger: ['change', "blur"] }
        ],
      }
    }
  },
  created() {
  },
  methods: {
    handUploadImg(val1, val2, val3) {
      this.form[val2] = val3
    },

    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          yopMerchantShopBind(this.form).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.open = false;
            this.loading = false
            this.isRefresh = true
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    operateClose() {
      this.open = false
      this.$emit("handleBindStatus", false, this.isRefresh, {})
    },

  },
  watch: {
    opens: {
      handler(val) {
        this.open = val
      },
      immediate: true,
    },
    id: {
      handler(val) {
        if (val) {
          this.loading = true
          getYeePayWithholding(val).then(response => {
            if (response.data) {
              let data = response.data;
              this.loading = false
              this.form = data
            }
          }).catch(() => {
            this.loading = false
          });
        }
      },
      immediate: true,
    }
  }

}

</script>
<style scoped lang="scss">
.form {
  padding-bottom: 80px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}
</style>
